<template>
  <div class="index">
    <div data-intro="就是这个码" data-step="1" class="date"></div>
    <div id="A" @click.stop="go" class="click"></div>
    <div class="click_anime"></div>
    <div class="but_box" v-if="isBut">
      <div class="but_end" @click.stop="goEnd">结束</div>
    </div>
  </div>
</template>

<script>
import { driver } from "driver.js";
import "@/styles/guideHelper.css"; /* 引入共享样式 */
import { showGuideEffect } from "@/utils/guideHelper";
// import "driver.js/dist/driver.css";
import introJs from "intro.js";
import "intro.js/introjs.css";
export default {
  data() {
    return {
      intro: null,
      driverObj: null,
      guideTimeout: null, // 用于存储 setTimeout 的 ID
      isendHappy: false, // 是否显示恭喜页面
      isBut: false, // 是否显示按钮
    };
  },
  created() {
    this.isBut = false;
    this.endHappy();
    this.guideTimeout = setTimeout(() => {
      this.isendHappy = false;
      this.$nextTick(() => {
        this.stopIntro();
        this.stopDriver();
        this.startIntro();
      });
    }, 1000);
  },
  // 页面加载时触发
  mounted() {
    // 阻止点击其他区域取消引导
    document.addEventListener("click", this.preventIntroExit, true);
  },
  // 页面关闭时触发
  beforeDestroy() {
    this.isBut = false;
    if (this.guideTimeout) {
      clearTimeout(this.guideTimeout); // 清除定时器
    }
    this.stopIntro();
    this.stopDriver();
    document.removeEventListener("click", this.preventIntroExit, true);
  },
  methods: {
    endHappy() {
      this.isendHappy = true;
    },

    // 去结尾页
    goEnd() {
      this.$router.push({
        path: "/end/end1",
      });
    },
    // 点击的引导
    guide() {
      // 定义基本样式
      this.driverObj = driver({
        allowClose: false,
        showProgress: true,
        steps: [
          {
            element: "#A",
            popover: {
              description: "到医院时，要先在报到机上扫码报到。",
              align: "center",
              side: "right",
            },
          },
        ],
      });
      // 开启引导
      this.driverObj.drive();
      // 2秒后显示遮罩和手指
      showGuideEffect();
    },
    // 停止页面引导
    stopIntro() {
      if (this.intro) {
        this.intro.exit();
        this.intro = null;
      }
    },
    // 停止点击引导
    stopDriver() {
      if (this.driverObj) {
        this.driverObj.destroy();
        this.driverObj = null;
        // 移除所有附加的类
        const paths = document.querySelectorAll("path.show-path");
        const click = document.querySelector(".click_anime.isShow");

        if (paths.length) {
          paths.forEach((path) => {
            path.classList.remove("show-path");
          });
        }

        if (click) {
          click.classList.remove("isShow");
        }
      }
    },

    // 页面引导
    startIntro() {
      this.intro = introJs();
      this.intro.setOptions({
        prevLabel: "上一步", //上一步按钮
        nextLabel: "下一步", //下一步按钮
        doneLabel: "结束", //结束按钮
        disableInteraction: true, // 禁用用户交互
        position: "left",
      });

      // 处理步骤切换
      this.intro.onafterchange(() => {
        clearInterval(this.interval);

        // 获取当前步骤
        const currentStep = this.intro._currentStep;
        console.log("currentStep", currentStep);

        // 隐藏 "上一步" 和 "下一步" 按钮
        const nextButton = document.querySelector(".introjs-nextbutton");

        // 如果是第一步，隐藏 "上一步" 按钮
        if (currentStep === 0) {
          nextButton.style.display = "none";
          this.isBut = true;
        }
      });

      this.intro.onexit(() => {
        clearInterval(this.interval);
      });
      // 点击结束触发，开启点击引导
      this.intro.oncomplete(() => {
        clearInterval(this.interval);

        // setTimeout(() => {
        //   this.guide(); // 等待一秒后执行 driver.js
        // }, 1000);
      });

      this.intro.start();
    },
    preventIntroExit(event) {
      // 获取 intro.js overlay
      const overlay = document.querySelector(".introjs-overlay");
      if (overlay && event.target === overlay) {
        event.stopPropagation();
        event.preventDefault();
      }
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/health/register/wx/46.jpg) no-repeat top;
  background-size: 100% 100%;
}

@media screen and (min-width: 440px) {
  .list {
    position: absolute;
    bottom: 5px;
    left: 20px;
    width: 360px;
    height: 300px;
  }
  .search {
    position: absolute;
    top: 95px;
    left: 100px;
    width: 270px;
    height: 35px;
  }

  .screen {
    position: absolute;
    top: 150px;
    left: 25px;
    width: 355px;
    height: 35px;
  }
  .click {
    position: absolute;
    top: 415px;
    left: 20px;
    width: 360px;
    height: 85px;
  }
  .click_anime {
    z-index: 1000000;
    display: none;
    position: absolute;
    top: 415px;
    left: 150px;
    width: 75px;
    height: 75px;
    background-image: url("@/assets/click.gif");
    background-size: 100% 100%;
    // transform: scale(1.2) rotateY(180deg);
  }
}
@media screen and (max-width: 440px) {
  .date {
    position: absolute;
    top: 42%;
    left: 31vw;
    width: 38vw;
    height: 22%;
  }

  .click {
    position: absolute;
    top: 42%;
    left: 29vw;
    width: 42vw;
    height: 23%;
  }
  .but_box {
    z-index: 1000000000 !important;
    position: absolute;
    top: 73%;
    left: 60vw;
  }
  .but_next {
    width: 120px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(@/assets/desktop/down.png) no-repeat center;
    background-size: 100% 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 34px;
    padding: 14px 24px;
    color: #ffffff;
    text-shadow: 1px 3px 4px #c32f0f;
  }
  .but_end {
    width: 120px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(@/assets/desktop/down.png) no-repeat center;
    background-size: 100% 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 34px;
    padding: 14px 24px;
    color: #ffffff;
    text-shadow: 1px 3px 4px #c32f0f;
  }
}
</style>
